<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="content">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/custom.css}" media="all">
</head>

<div class="layui-card">
    <div class="layui-card-header" style="height: 100%;">
            <div class="layui-form-item" style="margin-top: 10px;">
                <div class="layui-input-inline">
                    <input type="text" name="id" id="id" placeholder="编号" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="memberId" id="memberId" placeholder="会员ID" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="memberName" id="memberName" placeholder="会员名称" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="activityName" id="activityName" placeholder="充值活动名称" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="operators" id="operators" placeholder="操作人" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="consumptionTimesStart" name="start" placeholder="消费时间范围 起" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" id="consumptionTimesEnd" name="end" placeholder="消费时间范围 止" class="layui-input">
                </div>

                <button class="layui-btn" data-type="reload">查询</button>
                <button class="layui-btn" data-type="reset">重置</button>
            </div>
    </div>
    <div class="layui-card-body">
        <table id="consumption-times-table" lay-filter="consumption-times-table"></table>
    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'laydate', 'layer'], function () {
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        let layer = layui.layer;
        let $ = layui.jquery;

        let BIZ_NAME = 'consumption-times';
        let BIZ_TABLE = 'consumption-times-table';
        let BIZ_FORM = 'consumption-times-form';
        let BIZ_QUERY = 'consumption-times-query';
        let tableConsumptionTimesObj;
        let formConsumptionTimesObj;

        let cols = [
            [
                {title: '记录编号', field: 'id', align: 'center'},
                {title: '会员ID', field: 'memberId', align: 'center'},
                {title: '会员名称', field: 'memberName', align: 'center'},
                {title: '充次记录ID', field: 'rechargeId', align: 'center'},
                {title: '充值活动名称', field: 'activityName', align: 'center'},
                {title: '消费次数', field: 'times', align: 'center'},
                {title: '消费项目', field: 'items', align: 'center'},
                {title: '消费时间', field: 'consumptionTime', align: 'center'},
                {title: '进店渠道', field: 'fitEntryChannels', align: 'center'},
                {title: '操作人', field: 'operators', align: 'center'},
                {title: '创建时间', field: 'time', align: 'center'}
            ]
        ]
        window.renderConsumptionTimesTable = function (where) {
            tableConsumptionTimesObj = table.render({
                elem: '#' + BIZ_TABLE,
                url: '/' + BIZ_NAME + '/page',
                where: where,
                //data: [{id:1}], // 测试数据
                text: {none: '暂无相关数据'},
                response: {
                    statusCode: 200,
                    msgName: 'message'
                },
                page: true,
                limit: 10,
                limits: [10, 20, 50],
                cols: cols,
                skin: 'line',
                toolbar: '#consumption-times-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            });
        }

        laydate.render({
            elem: '#consumptionTimesStart'
            , type: 'datetime'
        });

        laydate.render({
            elem: '#consumptionTimesEnd'
            , type: 'datetime'
        });

        window.renderConsumptionTimesTable('');

        /*检索栏按钮 点击事件监控*/
        $('.layui-form-item .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 监听搜索
        let active = {
            reset: function () {
                $('#id').val('');
                $('#memberId').val('');
                $('#memberName').val('');
                $('#activityName').val('');
                $('#operators').val('');
                $('#consumptionTimesStart').val('');
                $('#consumptionTimesEnd').val('');
            },
            reload: function () {
                //执行重载
                table.reload('consumption-times-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: $('#id').val(),
                        memberId: $('#memberId').val(),
                        memberName: $('#memberName').val(),
                        activityName: $('#activityName').val(),
                        operators: $('#operators').val(),
                        start: $('#consumptionTimesStart').val(),
                        end: $('#consumptionTimesEnd').val()
                    }
                });
            }
        };
    });
</script>
